<!--优惠券-->
<template>
  <div class="user">
    <div class="handle" style="display: flex;justify-content: space-between">
      <div style="display: flex">
        <el-input style="width: 200px" placeholder="请输入优惠券名称" />
        <el-button style="margin-left: 20px" type="primary">查询</el-button>
      </div>
      <el-button type="success" @click="add">添加优惠券</el-button>
    </div>
    <div class="body">
      <el-table
        v-loading="isLoading"
        :stripe="true"
        :data="resList"
        style="width: 100%"
      >
        <el-table-column
          type="expand"
        >
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="创建时间">
                <span>{{ scope.row.gmtCreate }}</span>
              </el-form-item>
              <el-form-item label="折扣">
                <span>{{ scope.row.discount }}</span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{ scope.row.fieldCreate }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="couponName"
          label="名称"
        />
        <el-table-column
          prop="introduce"
          label="描述"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page="page.page"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getCouponsList } from '@/api/coupons'

export default {
  name: 'Index',
  data() {
    return {
      // 分页相关
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      resList: {},
      isLoading: false
    }
  },
  async created() {
    await this.getList(this.page.page, this.page.size)
  },
  methods: {
    // 获取表格数据
    async getList(page, size) {
      this.isLoading = true
      const res = await getCouponsList({ page, size })
      if (res.code !== 200) {
        this.$message({
          type: 'error',
          message: '数据获取失败',
          showClose: true,
          duration: 1500
        })
        this.isLoading = false
        return
      }
      this.resList = res.data.molds.records
      this.page.total = res.data.molds.total
      this.isLoading = false
    },
    add() {
      console.log('添加优惠券')
    },
    handleSizeChange(e) {
      // 页面
      this.page.size = e
      this.getList(this.page.page, this.page.size)
    },
    handleCurrentChange(e) {
      // 按钮
      this.page.page = e
      this.getList(this.page.page, this.page.size)
    }
  }
}
</script>

<style scoped>
.pagination{
  margin: 20px 0 0 20px;
}
.demo-table-expand{
  display: flex;
  flex-direction: column;
}
.user {
  padding: 10px;
  min-height: 100vh;
}
.handle {
  background-color: white;
  margin-top: 10px;
  padding: 30px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.body{
  padding: 20px 0px;
  background-color: white;
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}
</style>
